<template>
  <div class="diaryMangerContainer">
    <!--    发布人-->
    <div class="publisher content">
      <span class="publisherName leftStyle">发布人</span>
      <a class="userName rightStyle" style="color: #006EFF"  @click="toUserInfo">{{ compassNormalUser }}</a>
    </div>
    <!--    发布时间-->
    <div class="publisherTime content">
      <span class="leftStyle">发布时间</span>
      <span class="rightStyle">{{createTime}}</span>
    </div>
    <!--    话题-->
    <div class="subject content">
      <span class="leftStyle">话题</span>
      <span class="rightStyle">{{ diaryType }}</span>
    </div>
    <!--    文字内容-->
    <div class="content">
      <span class="leftStyle">文字内容</span>
      <div class="contentBox" style="text-indent: 1.5rem;padding: 10px">
        <span>{{diaryDesc}}</span>
      </div>
    </div>
    <!--    图片内容-->
    <div class="imgContent content" style="margin: 20px 0">
      <span class="leftStyle">图片内容</span>
      <div class="img">
        <el-image
          style="width: 100px; height: 100px"
          :src="srcList[0]"
          :preview-src-list="srcList">
          <div slot="error" class="image-slot">
          </div>
        </el-image>
      </div>
    </div>
    <!--    评论-->
    <div class="comment content" style="margin: 20px 0">
      <span class="leftStyle">评论</span>
      <el-table
        border
        :data="commentData"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
        stripe>
        <el-table-column
          prop="compassNormalUser.nickName"
          label="评论人">
        </el-table-column>
        <el-table-column
          prop="commentDesc"
          label="评论内容">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="评论时间">
        </el-table-column>
        <el-table-column
          prop="diaryId"
          label="回复数">
          <template slot-scope="scope">
            <a  @click="filterData(scope.row)" class="resFontColor">{{scope.row.diaryReplyList.length}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="likeNum"
          label="点赞数">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" style="border: none;color: #00afff"  @click="toDetail(scope.row)">详情</el-button>
            <el-button type="text" style="border: none;color: #FF0101"  @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  评论回复  -->
    <div class="commentReply content" style="margin: 20px 0;">
      <span class="leftStyle">评论回复</span>
      <el-table
        border
        :data="commentReplyData"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
        stripe>
        <el-table-column
          prop="replyUser.nickName"
          label="回复人">
        </el-table-column>
        <el-table-column
          prop="replyUser.normalUser"
          label="回复对象">
        </el-table-column>
        <el-table-column
          prop="replyDesc"
          label="回复内容">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="评论时间">
        </el-table-column>
        <el-table-column
          label="操作" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-button type="text" size="mini" style="border: none;color: #FF0101" @click="delCommentRelpy(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footerBtns">
      <el-button type="danger" @click="deleteDiary">删除</el-button>
      <el-button @click="toDiaryManger">取消</el-button>
    </div>
  </div>
</template>
<script>
import {
  delCommentReply,
  delCompassComment,
  delCompassDiary,
  getCompassDiary,
  listCompassDiary
} from '../../../../api/system/CompassDiary'
import { getGroupList } from '../../../../api/system/order'

export default {
  data(){
    return{
      //发布人
      compassNormalUser:"",
      userId:'',
      //创建时间
      createTime:"",
      //缩略图
      srcList:[],
      //学习类型
      diaryType:"",
      //文本内容
      diaryDesc:"",
      //图片内容
      imgContent:[],
      //  文本域数据
      textarea:"",
      //  评论表格数据
      commentData: [],
      //发布人Id
      detailId:"",
      commentReplyData:[],
      replaData:[],
      replyId:"",
    }
  },
  mounted() {
    const id = this.$route.query.id;
  },
  created() {
    this.getList()
  },
  methods:{
    //单元格样式
    fontColor(row,column,rowIndex,columnIndex){
      if(columnIndex===4){
        return 'resFontColor'
      }
},
    //跳转到个人详情页
    toUserInfo(){
      const uid=this.userId
      this.$router.push({
        name:"UserDetail",
        query:{
          id:uid
        }
      })
    },
    //获取列表信息
    getList() {
      const id = this.$route.query.id;
      if(id){
        getCompassDiary(id).then(res=>{
          const replyId=res.data.diaryReplyList
          this.compassNormalUser=res.data.compassNormalUser.nickName
          this.createTime=res.data.createTime
          this.diaryType=res.data.diaryType
          this.userId=res.data.compassNormalUser.userId
          this.diaryDesc=res.data.diaryDesc
          this.imgContent=res.data.fileList
          this.commentReplyData=res.data.diaryReplyList
          this.commentData=res.data.diaryCommentList
          this.detailId=res.data.id
          this.replaData=res.data.diaryReplyList
          for(let imgUrl of this.imgContent){
            this.srcList.push(imgUrl.fileUrl)
          }

        })
      }
    },
    /** 删除日志评论按钮操作 */
    handleDelete(row) {
      const ids = row.id
      this.$confirm('是否确认删除评论日记管理编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCompassComment(ids)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      }).catch(function() {
      })
    },
    //删除家长圈日志管理
    deleteDiary() {
      const ids = this.$route.query.id;
      console.log(ids)
      this.$confirm('是否确认删除日记管理编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCompassDiary(ids)
      }).then(() => {
        this.$router.push("/diaryManager")
        this.msgSuccess('删除成功')
      }).catch(function() {
      })
    },
    //删除评论回复
    delCommentRelpy(row){
      const ids = row.id
      this.$confirm('是否确认删除评论日记管理编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCommentReply(ids)
      }).then(() => {
        this.$router.push("/diaryManager")
        this.msgSuccess('删除成功')
      }).catch(function() {
      })
    },
    //返回日记管理页面
    toDiaryManger(){
      this.$router.push("/diaryManager")
    },
    //跳转到评论详情页面
    toDetail(row){
      this.$router.push({
        name:"commentDetail",
        query:{
          id:row.id
        }
      })
    },
    //筛选数据
    filterData(row){
      //定义选中评论的id
      const checkCid=row.id
      //定义符合条件的回复集合
      const replyArr=[]
      //找到需要筛选的回复的数据集合进行循环
      for(let item of this.replaData){
        //如果选中的id 等于 回复的关联的id 符合条件
        if(item.commentId===checkCid){
          replyArr.push(item)
          //  将符合条件的数据，赋值表格重新渲染
        }
      }
      console.log("xxxxxxxx");
      this.commentReplyData=replyArr
    },
    renderHeader(h) {
      return(
        <div>
          操作
          <el-button  type="text" onClick={()=>this.getList()} style="marginLeft:20px">重置筛选</el-button>
        </div>
      )
    },
  }
}
</script>
<style lang="scss" scoped>
.resFontColor{
  color: #00afff;
}
.diaryMangerContainer{
  font-size: 14px;
  margin: 20px;
  padding: 50px 37px;
  .content{
    display: flex;
  }
  .contentBox{
    width: 600px;
    padding: 10px;
    border: 1px solid #cccccc;
    line-height: 20px;
  }
}
.leftStyle{
  font-weight: bold;
  width: 80px;
  line-height: 40px;
  height: 40px;
  margin-right: 30px;
}
.rightStyle{
  height:40px;
  line-height: 40px;
}
.footerBtns{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
